<template>
  <div class="home-box">
    <h1>{{ title }}</h1>
    <div>{{ desc }}</div>
    <AppAlert>
      这是一个自动导入的组件。
    </AppAlert>
    <div class="flex">
      <NuxtLink to="/about?id=456">关于页面{{ count }}</NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
// 见nuxt.config.ts的runtimeConfig配置
const runtimeConfig = useRuntimeConfig();
// 见app.config.ts配置文件
const appConfig = useAppConfig();
const title = ref(testName);
const desc = ref("")
const count = useCounter(); // 与useState('counter')相同
console.log("@@index.vue@@", count.value)
console.log("@@runtimeConfig@@", toRaw(runtimeConfig))
console.log("@@appConfig@@", toRaw(appConfig))

// 在你的pages/目录下，你可以使用definePageMeta和useHead来根据当前路由设置元数据。
useHead({
  title: title
})
init()
async function init() {
  try {
    /**
     * status 变量可以有以下取值：
     * idle：获取未开始
     * pending：获取已开始但尚未完成
     * error：获取失败
     * success：获取成功完成
    */
    // 响应式
    const { data, error, pending, status } = await useFetch('/api/hello')
    console.log("init result", toRaw(data.value), error.value, pending.value, status.value)
    desc.value = data.value?.data || ''
  } catch (err) {
    console.error("@@useFetch error@@", err)
  }
}
</script>


<style lang="scss" scoped>
.home-box {
  font-size: 12px;
  h1 {
    font-size: 14px;
    font-weight: normal;
    color: $primary;
  }
}
</style>